<template>
    <el-container style="height: calc(100vh - 32px);min-width:900px;">
        <el-main class="p0" @scroll.native="handleScroll">
            <div class="manage-box">
                <header :class="is_fixed ? 'fix-head' : ''">
                    <el-select v-model="sys_id" @select="getFreeAuth">
                        <el-option v-for="item in sys_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>

                    <el-button type="primary" class="save" @click="save">保存</el-button>
                </header>
                <div class="main-box">
                    <div class="check-auth-list clear-float" v-for="item in free_auth_list" :key="item.id">
                        <div class="auth-manage-img-block">
                            <img :src="item.logo" alt="logo">
                        </div>
                        <div class="auth-manage-checkbox">
                            <el-tree node-key="id" :default-expanded-keys="check_list" :default-checked-keys="check_list" ref="tree" show-checkbox :data="item.children" :props="props"></el-tree>
                        </div>
                    </div>
                </div>
            </div>
        </el-main>

    </el-container>

</template>

<script>
import { getSys } from "@/api/auth_manage";
import { getFreeAuth, saveFreeAuth } from "@/api/free_auth";
import "@/assets/css/auth.css";

export default {
    name: "free-auth",
    data() {
        return {
            sys_list: undefined,
            sys_id: undefined,
            check_list: undefined,
            free_auth_list: undefined,
            props: {
                label: "label",
                children: "children",
                value: "id"
            },
            is_fixed: false
        };
    },
    methods: {
        initData() {
            try {
                getSys().then(res => {
                    this.sys_list = res;
                    if (this.sys_list) {
                        this.sys_id = this.sys_list[0].id;
                        this.getFreeAuth();
                    }
                });
            } catch (error) {
                this.$message.error(error);
            }
        },
        handleScroll(ev) {
            if (ev.target.scrollTop >= 30) {
                this.is_fixed = true;
            } else {
                this.is_fixed = false;
            }
        },
        save() {
            let arr = [];
            this.free_auth_list.forEach((element, index) => {
                let str = "tree";
                arr = arr.concat(this.$refs[str][index].getCheckedKeys());
            });
            saveFreeAuth({ authIds: arr, sys: this.sys_id })
                .then(res => {
                    this.$message({
                        type: "success",
                        message: "保存成功!"
                    });
                    this.getFreeAuth();
                })
                .catch(err => {
                    this.$message.error(er);
                });
        },
        getFreeAuth() {
            getFreeAuth({ sys: this.sys_id })
                .then(res => {
                    this.free_auth_list = res.auth;
                    this.check_list = res.checks;
                })
                .catch(err => {
                    this.$message.error(err);
                });
        }
    },
    mounted() {
        this.initData();
    }
};
</script>

<style scoped>
header.fix-head {
    min-width: calc(900px - 32px);
    position: absolute;
    z-index: 100;
    width: calc((100vw - 208px) * 0.84 - 46px);
    top: 120px;
}
</style>
